<!doctype html>
<html>
<head>
	<title>WebRTC: Still photo capture demo</title>
	<meta charset='utf-8'>
	<link rel="stylesheet" href="main.css" type="text/css" media="all">
	<script src="capture.js">
	</script>
</head>
<body>
<div class="contentarea">
	<h1>
		MDN - WebRTC: Still photo capture demo <br>
		MDN-WebRTC：静止图像拍摄演示
	</h1>
	<p>
		This example demonstrates how to set up a media stream using your built-in webcam, fetch an image from that stream, and create a PNG using that image.
		<br>本示例演示如何使用内置的网络摄像头设置媒体流，如何从该流中获取图像以及如何使用该图像创建PNG。
	</p>
  <div class="camera">
    <video id="video">Video stream not available.</video>
    <button id="startbutton">Take photo </button> 
  </div>
  <canvas id="canvas">
  </canvas>
  <div class="output">
    <img id="photo" alt="The screen capture will appear in this box."> 
  </div>
	<p>
		Visit our article <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos"> Taking still photos with WebRTC</a> to learn more about the technologies used here.
		<br>
		请访问我们的文章 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos"> 使用WebRTC拍摄静态照片，</a>以了解有关此处使用的技术的更多信息。
	</p>
</div>
</body>
</html>
